<template>
  <div>
    <group label-width="4.5em" label-align="right" label-margin-right="2em" class="m-1-t">
      <x-input title="姓名" placeholder="必填" v-model="addressInfo.name"></x-input>
      <x-input title="电话" placeholder="必填" v-model="addressInfo.phone" is-type="china-mobile"></x-input>
      <x-address title="地区" raw-value :list="addressData" v-model="addressInfo.placeA" value-text-align="left"></x-address>
      <x-input title="地址" placeholder="必填" v-model="addressInfo.placeB"></x-input>
    </group>
  </div>
</template>
<script>
import { Group, XInput, XAddress, ChinaAddressV4Data } from 'vux'
export default {
  components: {
    Group,
    XInput,
    XAddress
  },
  data () {
    return {
      addressData: ChinaAddressV4Data,
      addressInfo: {}
    }
  },
  methods: {
    init () {
      this.$store.state.editorAddressObj.then(data => {
        this.addressInfo = data[0]
        this.addressInfo.placeA = data[0].placeA.split(' ')
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
.m-1-t {
  margin-top: -1.3em;
}
</style>
